import React, { useRef, useState, useEffect } from 'react';
import { flushSync } from 'react-dom';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { ModalForm, PageContainer, ProFormText, ProTable, ProFormUploadButton } from '@ant-design/pro-components';
import { Button, message, Image, Popconfirm } from 'antd';
import errorImage from '@/assets/error.png';
import _ from '@/assets/utils';
import BASE_API from '@/services/base';
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { history, useSearchParams, useModel, Helmet } from '@umijs/max';
import md5 from 'blueimp-md5';
import {
    ProForm,
    ProFormDigit,
    ProFormRadio,
    ProFormSelect,
    ProFormTextArea,
} from '@ant-design/pro-components';
const OneBox = styled.div`
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    padding: 20px;
    width: 100%;
    height: 230px;
    .ant-input-affix-wrapper {
        border-radius: 5px!important;
        width: 200px!important;
        height: 40px!important;
        border: 1px solid #dcdfe6;
        color: #606266;
        padding: 0 15px;
    }
    .ant-form-item-explain-error{
        font-size: 12px;
    }
    .ant-btn {
        color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
    border-radius: 4px!important;
    width: 97px;
    height: 40px;
    margin-left: 60px;
    &:hover{
        background: #f78989;
    border-color: #f78989;
    }
    }
`;
const TwoBox = styled.div`
margin-top: 25px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    padding: 20px;
    width: 100%;
    height: 230px;
    .ant-input-affix-wrapper {
        border-radius: 5px!important;
        width: 200px!important;
        height: 40px!important;
        border: 1px solid #dcdfe6;
        color: #606266;
        padding: 0 15px;
    }
    .ant-form-item-explain-error{
        font-size: 12px;
    }
    .ant-btn {
        color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
    border-radius: 4px!important;
    width: 97px;
    height: 40px;
    margin-left: 60px;
    &:hover{
        background: #f78989;
    border-color: #f78989;
    }
    }
`;
const System = function System() {
    let formIns = useRef();
    useEffect(() => {
        (async () => {
            try {
                let { resultCode, data } = await BASE_API.adminUserProfile();
                if (+resultCode === 200) {
                    let { loginUserName, nickName
                    } = data;
                    formIns.current.setFieldsValue({
                        loginUserName, nickName
                    });
                }
            } catch (_) { }
        })()
    }, [])
    const submitOne = async (values) => {
        try {
            let { resultCode, message: aaa } = await BASE_API.modifyUsers(values);
            if (+resultCode !== 200) {
                message.error(aaa);
                return;
            }
            message.success(`修改成功`);

        } catch (_) { }
    }

    const submitTwo = async (values) => {
        let {newPassword,originalPassword
        } = values;
        values.newPassword = md5(newPassword);
        values.originalPassword = md5(originalPassword);
        try {
            let { resultCode, message: aaa } = await BASE_API.modifyPassWord(values);
            if (+resultCode !== 200) {
                message.error(aaa);
                return;
            }
            message.success(`修改成功`);

        } catch (_) { }
    }
    return <PageContainer>
        <OneBox>
            <ProForm
                onFinish={submitOne}
                layout={'horizontal'}
                formRef={formIns}
                submitter={{
                    // 配置按钮文本
                    searchConfig: {
                        resetText: '重置',
                        submitText: '确认修改',
                    },
                    // 配置按钮的属性
                    resetButtonProps: {
                        style: {
                            // 隐藏重置按钮
                            display: 'none'
                        }
                    },
                    //确定按钮
                    submitButtonProps: {}
                }}
                validateTrigger='onBlur'
            >
                <ProFormText
                    width="md"
                    name="loginUserName"
                    label="登录名"
                    placeholder=""
                    rules={[
                        { required: true, message: '登录名不能为空' }
                    ]}
                />
                <ProFormText
                    width="md"
                    name="nickName"
                    label="昵称&nbsp;&nbsp;&nbsp;&nbsp;"
                    placeholder=""
                    rules={[
                        { required: true, message: '昵称不能为空' }
                    ]}
                />
            </ProForm>
        </OneBox>

        {/* ///////////////////////////  */}




        <TwoBox>
            <ProForm
                onFinish={submitTwo}
                layout={'horizontal'}
                // formRef={modelFormIns}
                validateTrigger='onBlur'
                submitter={{
                    // 配置按钮文本
                    searchConfig: {
                        resetText: '重置',
                        submitText: '确认修改',
                    },
                    // 配置按钮的属性
                    resetButtonProps: {
                        style: {
                            // 隐藏重置按钮
                            display: 'none'
                        }
                    }
                }}
            >
                <ProFormText
                    width="md"
                    name="originalPassword"
                    label="原密码"
                    placeholder=""
                    rules={[
                        { required: true, message: '原密码不能为空' }
                    ]}
                />
                <ProFormText
                    width="md"
                    name="newPassword"
                    label="新密码"
                    placeholder=""
                    rules={[
                        { required: true, message: '新密码不能为空' }
                    ]}
                />
            </ProForm>
        </TwoBox>
    </PageContainer >;
};
export default System;